<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import httpInstance from "@/utils/http";
import { userStore } from "@/stores/userStore";
const router = useRouter();
const account = ref("");
const password = ref("");
const token = ref("");
//const role = ref('');
const errorMessage = ref("");
const useStore = userStore();
const accountError = ref("");
const passwordError = ref("");
//登录验证
const login = async () => {
  console.log(account.value, password.value);
  try {
    httpInstance
      .post("/login", {
        account: account.value,
        password: password.value,
      })
      .then((res) => {
        console.log("res:", res);
        console.log("res.data:", res.data);
        console.log("res.code:", res.code);

        //role.value = res.data.role;
        if (res.code === 1) {
          useStore.login(
            res.data.id,
            account.value,
            res.data.name,
            res.data.token,
            res.data.className
          );
          //console.log("res.data.token:",res.data.token)
          if (res.data.role === 1) {
            //教师
            //console.log("success:",res.data.role);
            router.push("/teacher");
          } else {
            //学生
            //console.log("success:",res.data.role);
            router.push("/student/layout");
          }
        } else {
          if (res.msg === "账号不存在") accountError.value = res.msg;
          else passwordError.value = res.msg;
        }
      });
    //studentStore.login(response.data.id, account.value, response.data.name);
    //router.push("/");
  } catch (error) {
    errorMessage.value = "登陆失败";
    console.log("登录失败", error);
  }
};
</script>

<template>
  <div class="container">
    <div class="topic">学生在线考试系统</div>
    <div class="form">
      <!-- 账号输入框 -->
      <div class="account">
        <el-input
          v-model="account"
          style="width: 60%; left: 25%; height: 130%"
          placeholder="请输入账号"
          @keyup.enter="login"
        />
        <!-- 显示账号错误信息 -->
        <div class="error-message">{{ accountError }}</div>
      </div>

      <!-- 密码输入框 -->
      <div class="password">
        <el-input
          v-model="password"
          style="width: 60%; left: 25%; height: 130%"
          type="password"
          placeholder="请输入密码"
          show-password
          @keyup.enter="login"
        />
        <!-- 显示密码错误信息 -->
        <div class="error-message">{{ passwordError }}</div>
      </div>

      <br />
      <div class="remark">* 初始账号为学号或工号,密码为身份证后六位</div>
      <div class="login">
        <el-button type="primary" plain style="width: 125%" @click="login" class="login">
          登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* .login{
  margin-left:18%;
  width:50px;
} */
.error-message {
  color: red;
  font-size: 100%;
  margin-top: 0%;
  text-align: left;
  width: 60%;
  left: 25%;
  position: relative;
}
.container {
  width: 100vw;
  /*  background-color: rgb(209, 239, 209); */
  background-image: url("@/assets/img/780.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  position: relative;
  display: flex;
  overflow: hidden;

  .topic {
    width: 75vw;
    height: 100vh;
    font-size: 135px;
    color: rgba(0, 0, 0, 0.5);
    margin: 15% 0 0 3%;
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.8), -2px -2px 4px rgba(0, 0, 0, 0.8);
  }

  .form {
    width: 25vw;
    height: 40vh;
    background-color: rgba(0, 0, 0, 0);
    /* background-color: rgb(198, 249, 198); */
    /*  position: absolute; */
    border: 1px solid black;
    box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.4);
    /*     width: 30%;
    height: 35%;
    left: 75%;
    top: 40%; */
    margin: 20% 0 0 5%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative; /* 添加相对定位 */

    .account {
      position: relative;
      margin: 0px 0 0 -40px;
      height: 10%;
      width: 100%;
      /*  margin: 10px 0; */
    }

    .password {
      position: relative;
      margin: 30px 0 0 -40px;
      height: 10%;
      width: 100%;
      /* position: absolute;
      top: 40%;
      height: 10%;
      width: 100%;
      margin: 10px 0; */ /* 上下间距 */
    }

    .login {
      position: relative;
      margin: 25px 0 0 -10px;
      /*  position: absolute;
      bottom: 25%;
      left: 25%; */
    }

    .remark {
      margin-top: 5%;
      color: #696363;
      margin-bottom: -15px;
    }
  }
}
</style>
